<template>
	<view class="car-list">
		<view class="header-nav">
			<view class="search">
				<uni-easyinput prefixIcon="search" @confirm="searchQuery" type="text" confirmType="search"
					v-model="params.value" placeholder="请输入vin搜索" @iconClick="iconClick" @clear="clearQuery">
				</uni-easyinput>
			</view>

		</view>

		<view class="uni-padding-wrap content">
			<view v-if="current === 0 && list.length">
				<carList :item="item" v-for="item in list" :key="item.id" @tap="itemClick(item)"></carList>
			</view>
			<Empty style="height: 100%;" v-else></Empty>
		</view>

		<uni-popup ref="popup" background-color="#fff">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="提交" title="重新提交" @confirm="dialogConfirm"
				@close="dialogClose">
				<uni-forms ref="valiForm" :modelValue="baseFormData" label-position="left" :rules="rules">
					<uni-forms-item label="车架号" name="vin" required>
						<uni-easyinput v-model="baseFormData.vin" placeholder="请输入车架号" />
					</uni-forms-item>
					<uni-forms-item label="里程表" name="lCb" required>
						<uni-easyinput v-model="baseFormData.lCb" placeholder="请输入里程表" />
					</uni-forms-item>
					<uni-forms-item label="车牌号" name="hphm" required>
						<uni-easyinput v-model="baseFormData.hphm" placeholder="请输入车牌号" />
					</uni-forms-item>
					<uni-forms-item label="车型" name="hpzl" required>
						<uni-easyinput v-model="baseFormData.hpzl" placeholder="请输入车型" />
					</uni-forms-item>
				</uni-forms>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import {
	getCGBH,
	updateCarStatus
} from '@/api/app.js'
import { getCurrentNowTime } from '@/utils/index.js'
import carList from '@/components/testCar/index.vue'
import Empty from '@/components/empty/index.vue'
export default {
	components: {
		carList,
		Empty
	},
	data() {
		return {
			current: 0,
			items: ['待检测', '已完结'],
			styleType: 'button',
			activeColor: '#409Eff',
			params: {},
			list: [],
			list2: [],
			id: '',
			name: '',
			olist: [],
			olist2: [],
			baseFormData: {},
			rules: {}
		}
	},
	onShow() {
		this.id = uni.getStorageSync('id')
		this.name = uni.getStorageSync('name')
		this.init()
	},
	methods: {
		async init() {
			let res = await getCGBH({
				id: this.id
			})
			if (res.code == 0) {
				this.list = []
				this.list2 = []
			} else {
				this.list = res.data
				this.list2 = res.data
			}
		},
		iconClick(val) {
			console.log('iconClick', val);
		},
		searchQuery(val) {
			console.log(val, 'searchQuery');
			if (val) {
				this.list = this.list.filter(item => {
					return item.vin.includes(val)
				})
			}

		},
		clearQuery() {
			this.list = this.list2
		},
		itemClick(item) {
			console.log(item.id);
			this.$refs.popup.open()
			this.baseFormData = item

		},
		dialogClose() {
			console.log('点击关闭')
		},
		dialogConfirm() {
			this.$refs.valiForm.validate().then(async res => {
				this.baseFormData.isDel = false
				this.baseFormData.createTime = getCurrentNowTime()
				await updateCarStatus(this.baseFormData)


				uni.showToast({
					icon: 'none',
					title: '操作成功'
				})

				this.init()

				this.$refs.popup.close()
			}).catch(err => {
				console.log('err', err);
			})
		},
	}
}
</script>

<style scoped lang="scss">
.car-list {
	.header-nav {
		padding: 20rpx 0;
		background-color: #ffffff;

		.search {
			padding: 0 20rpx;
			margin-top: 10rpx;
		}

		.tabs {
			padding: 0 20rpx;
		}
	}

	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}


	.content {
		padding: 20rpx;
		max-height: calc(100vh - 220rpx);
	}

	.popup-content {
		padding: 30rpx;
		width: 600rpx;
		background-color: #fff;
	}
}
</style>